*{
  margin: 0;
  padding: 0;
  #index {
    width: 95%;
    margin: auto;
  
    /* 顶部导航 */
    .t-navbar {
      margin-bottom: 5px;
  
      .custom-title {
        font-size: 18px;
        font-weight: 600;
      }
    }
  
    /* 搜索框 */
    .search-box {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
  
      .search-input {
        width: 90%;
  
        .input {
          height: 10px;
          align-items: center;
          --td-input-bg-color: rgba(132, 132, 132, 0.1);
          border-radius: 30px;
        }
      }
  
      .serach-btn {
        width: 10%;
        background-color: #4CAF50;
        color: white;
      }
    }
  
    /* 轮播图 */
    .banner {
      width: 100%;
      margin-top: 10px;
    }
  
    /* 宫格 */
    .grid {
      width: 95%;
      margin: auto;
      margin-top: 10px;
      display: grid;
    }
  
    /* 通知 */
    .notice {
      width: 100%;
      margin-top: 20px;
      align-items: center;
      background-color: #fff7f5;
      border-radius: 10px;
  
      .notice-item {
        align-items: center;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
  
        .notice-icon {
          width: 15%;
          color: red;
          font-weight: bold;
          font-size: 20px;
          border-right: 1px solid silver;
        }
  
        .notice-text {
          width: 75%;
          align-items: center;
  
          .not {
            width: 100%;
            align-items: center;
            margin-top: 5px;
            display: flex;
            justify-content: space-evenly;
  
            .not-left {
              width: 15%;
              font-size: 13px;
              border: 1px solid red;
              text-align: center;
              color: red;
            }
  
            .not-right {
              width: 90%;
              font-size: 12px;
            }
          }
        }
      }
  
    }
  
    /* 推荐 */
    .recommend {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
  
      .recom-left {
        width: 49%;
        border-radius: 10px;
        color: white;
        display: flex;
        justify-content: space-between;
        background: linear-gradient(to right, #fe8c8c, #f8adad);
  
        .recom-left-text {
          width: 65%;
          margin: 10px 0;
  
          .rec-item {
            width: 90%;
            margin: auto;
  
            .rec-text {
              font-size: 20px;
            }
  
            .rec-title {
              font-size: 12px;
            }
          }
        }
  
        .recom-left-img {
          width: 40%;
          margin: 10px 0;
  
          img {
            width: 100%;
            height: 90px;
          }
        }
      }
  
      .recom-right {
        width: 49%;
        color: white;
        border-radius: 10px;
        color: white;
        display: flex;
        justify-content: space-between;
        background: linear-gradient(to right, #fe9a40, #f8c191);
  
        .recom-right-text {
          width: 65%;
          margin: 10px 0;
  
          .recc-item {
            width: 90%;
            margin: auto;
  
            .recc-text {
              font-size: 20px;
            }
  
            .recc-title {
              font-size: 12px;
            }
          }
        }
  
        .recom-right-img {
          width: 40%;
          margin: 10px 0;
  
          img {
            width: 100%;
            height: 90px;
          }
        }
      }
    }
  
    /* 榜单 */
    .rank {
      width: 100%;
      display: flex;
      margin-top: 10px;
      border-radius: 15px;
      box-shadow: 0 5px 10px silver;
      background: linear-gradient(to bottom, #fbe0e5, #ffffff);
  
      .rank-box {
        width: 33%;
        text-align: center;
  
        .rank-box-top {
          width: 100%;
          margin: auto;
          margin: 15px 0 5px 0;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
  
          .rb-text {
            width: 70%;
            font-weight: bolder;
            font-size: 18px;
          }
  
          .rb-img {
            width: 20%;
            align-items: center;
  
            img {
              width: 100%;
              height: 20px;
            }
          }
        }
  
        .rank-box-cent {
          width: 70%;
          margin: auto;
          line-height: 25px;
          align-items: center;
          font-size: 12px;
          color: white;
          border-radius: 20px;
          margin: auto;
          background-color: #fd726f;
          margin-bottom: 20px;
        }
      }
    }
  
    /* 送人 */
    .send {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
  
      .send-left {
        width: 49%;
        border-radius: 5px;
        background: linear-gradient(to bottom, #fbe0e5, #ffffff);
  
        .sen-text {
          width: 90%;
          margin: auto;
  
          .sen-text1,
          .sen-text2 {
            color: #f4738d;
          }
  
          .sen-text1 {
            font-size: 18px;
            font-weight: bolder;
            margin-top: 10px;
          }
  
          .sen-text2 {
            font-size: 12px;
          }
  
          .sen-text3 {
            color: #f48ba0;
            font-size: 10px;
            margin-bottom: 20px;
          }
        }
  
        .sen-img {
          width: 100%;
          margin-top: 39px;
  
          img {
            width: 100%;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
          }
        }
      }
  
      /* 送长辈，朋友 */
  
      .send-right {
        width: 49%;
        border-radius: 5px;
  
        .send-right-top {
          width: 100%;
          margin-bottom: 5px;
          border-radius: 10px;
          position: relative;
          display: flex;
          background: linear-gradient(to bottom, #faebdd, #f7f3ef);
  
          .srt-left {
            width: 65%;
            margin-top: 15px;
            margin-left: 15px;
            margin-bottom: 30px;
  
            .srt-left-text1,
            .srt-left-text2 {
              color: #feac65;
            }
  
            .srt-left-text3 {
              color: #facfaa;
              font-size: 12px;
            }
          }
  
          .srt-right {
            width: 35%;
            position: absolute;
            right: 0;
            bottom: 0;
  
            img {
              width: 100%;
              height: 80px;
            }
          }
        }
      }
    }
  
    /* 爆款必抢 */
    .buy {
      margin-top: 25px;
      margin-bottom: 45px;
  
      .buy-text {
        align-items: center;
        display: flex;
  
        .buy-text-left {
          width: 85%;
          font-weight: bolder;
          font-size: 25px;
        }
  
        .buy-text-right {
          width: 15%;
          color: silver;
        }
      }
    }
  
    /* 商品列表 */
    .buy-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;
  
      .buy-item {
        width: 48%;
        margin-bottom: 15px;
  
        .buy-item-img {
          width: 100%;
          height: 140px;
  
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
  
        .buy-item-text {
          .buy-item-text1 {
            font-size: 20px;
            font-weight: bolder;
          }
  
          .buy-item-text2 {
            width: 100%;
            margin: 10px 0;
            font-size: 12px;
            color: silver;
  
            .bu-i {
              padding-left: 20px;
            }
          }
  
          .example-progress {
            background-color: #fff;
  
            &__item:not(:last-child) {
              margin-bottom: 16px;
            }
  
            .radius--round {
              --td-radius-round: 0px;
            }
          }
  
          .buy-item-text3 {
            width: 100%;
            color: red;
            display: flex;
            justify-content: space-between;
            align-items: center;
  
            .bu-p {
              .bu-price {
                font-size: 25px;
                font-weight: bolder;
              }
            }
  
            .bu-bt {
              .butt {
                width: 65px;
                height: 35px;
                font-size: 15px;
                color: white;
                border: none;
                border-radius: 30px;
                background-color: red;
              }
            }
          }
        }
      }
    }
  }
}
